<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta name="viewport" content="width=device-width,initial-scale=1">
		<!--<script type="text/javascript" src="../src/jmchart.debug.js" id="jmgraph" ></script>-->

		<style>
		html,body {
			margin:0;
			padding:0;
			width:100%;
			height:100%;
		}
		#mycanvas canvas, #mycanvas div{
			background-color:#fff;
			margin:0 auto;		
		}
		/*div.jm-tooltip {
			background-color: rgba(255,255,255,0.8);
			padding:4px;
			border:1px solid #000;
			box-shadow: 0 0 3px #000;
			border-radius: 6px;
		}*/
		</style>
		<script type="module">
			//window.devicePixelRatio = 1;
			import { jmChart } from '../dist/jmchart.esm.js';

			(function load() {
				var w = Math.max((window.innerWidth || window.document.body.clientWidth) * 0.9, 600);
				var h = Math.max((window.innerHeight || window.document.body.clientHeight) * 0.6, 200);			
				inichart(w,h);
			})();
			

			function inichart(w, h) {
					var chart = new jmChart('mycanvas', {
						width: w,
						height: h,
						xField: 'x',
                        baseY: 0,
						// 最大和最小X值，  这里一般不用指定，除非硬是需要
						minXValue : 0,
						maxXValue : 10,
						autoRefresh: true
					});
					chart.legend.legendPosition = 'top';
					chart.legend.visible = true;
					chart.enableAnimate = true;

					// touch改变数据点事件
					chart.on('touchPointChange', function(args) {
						console.log(args);
					});
					
					
					var bar = chart.createSeries('stackBar', {
						field: ['y1', 'y2', 'y3'],
						// 图例格式化，如果不给定，则采用legendLabel
						legendFormat: function(options) {
							return '图1';
						},
						yLabelFormat: (v, label) => {
							return v.toFixed(0);
						}
					});	
					var line = chart.createSeries('line', {
						field: 'y4',
						legendLabel: 'line',
						style: {
							showItem: false,
							lineWidth: 3,
							curve: true,
							//lineType: 'dotted', // 虚线
							shadow: function() {								
								return `2, 2, 10, ${this.style.stroke}`;
							},
						}
					});	
		
					const datacount = 10;
					function animate() {
						if(true) {
							chart.data = [];
							for(var i = 0;i<datacount;i++) {
								var data = {
									x : i,
									y1 :  Math.random() * 200 - 100,
									y2: Math.random() * 200 + 50,
									y3: Math.random() * 200 + 50,
								};
								
								data.y4 = data.y1;
								if(data.y4 <= 0) {
									if(data.y2 <= 0) data.y4 += data.y2;
									else data.y4 = data.y2;
								}
								else {
									if(data.y2 > 0) data.y4 += data.y2;
								}
								if(data.y4 <= 0) {
									if(data.y3 <= 0) data.y4 += data.y3;
									else data.y4 = data.y3;
								}
								else {
									if(data.y3 > 0) data.y4 += data.y3;
								}
								chart.data.push(data);
							}
						}
						else {
							for(var i=datacount-1;i>0;i--) {
								var x = chart.data[i].x;
								chart.data[i] = chart.utils.clone(chart.data[i - 1]);
								chart.data[i].x = x;
							}
							
								chart.source[0] = {
									x : chart.data[0].x,
									y : Math.random() * 200 - 100
								};
								
						}
						
						//setTimeout(animate,500);
						chart.refresh();
						console.log(chart.data);
					}
					
					animate();
					chart.utils.bindEvent(document.getElementById('btnRedraw'),'click',animate);
					
				}
		</script>
	</head>
	<body>
		<div id="mycanvas">
			</div>	
			<button id="btnRedraw">重绘</button>		
	</body>
</html>